<template>
    <div>
        <!-- 头部 -->
        <el-row>
            <el-col :span='24' class="top">
                <div class="grid-content bg-purple-dark">
                     <el-button type="primary" @click="showDialog('new')">新建</el-button>
                    <el-button type="success" @click="showDialog('save')">保存</el-button>
                    
                   <el-button type="primary" @click='preview()'>预览</el-button>
                  
                    <el-select v-model="value" placeholder="方案选择" @change="select">
                        <el-option  v-for="(item,index) in caseArray"
                        :key = "index"
                        :label = "item.caseName"
                        :value = "item.caseId"
                        
                        ></el-option>
                    </el-select>
                </div>
            </el-col>
        </el-row>

        <el-dialog title='方案' :visible.sync='dialogTableVisible'>
            <el-form :model='tempCaseInfo'>
                <el-form-item label='名称' :label-width="formLabelWidth">
                    <el-input v-model='tempCaseInfo.caseName' autocomplete="off" ></el-input>
                </el-form-item>
                 <el-form-item label='类型' :label-width="formLabelWidth">
                    <el-input v-model='tempCaseInfo.type' autocomplete="off" ></el-input>
                </el-form-item>
                 <el-form-item label='工程' :label-width="formLabelWidth">
                    <el-input v-model='tempCaseInfo.projectName' autocomplete="off" ></el-input>
                </el-form-item>
                 <el-form-item label='图片' :label-width="formLabelWidth">
                    <el-input v-model='tempCaseInfo.image' autocomplete="off" ></el-input>
                </el-form-item>


            </el-form>
            <div slot="footer" class='diaglog-footer'>
                <el-button @click="dialogTableVisible=false">取消</el-button>
                <el-button type="primary" @click="save()">确定</el-button>
            </div>
        </el-dialog>

        <el-row >
            <!-- 代码区 -->
            <el-col :span='20'>
                <codemirror
                    ref="mycode"
                 
                    v-model="webCode"
                    :options="cmOptions"
                    class="code">
                  </codemirror>
            </el-col>
           
            <!-- sql区 -->
            
           <el-col :span='4'  class="CodeMirror">
               <el-row >
                   <el-col :span='24' class='top'>
                       <el-button type='success'>新增</el-button>
                       <el-button type='primary'>修改</el-button>
                       <el-button type='danger'>删除</el-button>
                   </el-col>
               </el-row>
               <el-row>
                   <el-table>
                       <el-table-column type="selection"></el-table-column>
                       <el-table-column label='SQL名称'></el-table-column>
                       <el-table-column label='创建人'></el-table-column>
                   </el-table>
               </el-row>
           </el-col>
           
        </el-row>
    </div>
</template>

<script>
import  {codemirror}  from 'vue-codemirror'
import "codemirror/theme/ambiance.css";  // 这里引入的是主题样式，根据设置的theme的主题引入，一定要引入！！
require("codemirror/mode/javascript/javascript"); // 这里引入的模式的js，根据设置的mode引入，一定要引入！！


import 'codemirror/addon/selection/active-line.js'
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/monokai.css'
import 'codemirror/theme/eclipse.css'
import 'codemirror/addon/hint/show-hint.js'
import 'codemirror/addon/hint/show-hint.css'
import 'codemirror/addon/hint/html-hint.js'
import 'codemirror/addon/hint/javascript-hint.js'
import 'codemirror/addon/hint/css-hint.js'
import 'codemirror/addon/lint/json-lint.js'
import 'codemirror/mode/javascript/javascript.js'
import 'codemirror/mode/css/css.js'
import 'codemirror/mode/htmlmixed/htmlmixed.js'
import 'codemirror/addon/edit/closebrackets.js'
import 'codemirror/addon/edit/matchbrackets.js'
import {CaseInfo} from '../store/module/CaseInfo'
import {StringUtil} from '../util/StringUtil'

//strimg.format
String.format = function() {
    if( arguments.length == 0 )
        return null;

    var str = arguments[0];
    for(var i=1;i<arguments.length;i++) {
        var re = new RegExp('\\{' + (i-1) + '\\}','gm');
        str = str.replace(re, arguments[i]);
    }
    return str;
}
//生成uuid
function uuid() {
	var s = [];
	var hexDigits = "0123456789abcdef";
	for (var i = 0; i < 36; i++) {
		s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
	}
	s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
	s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
	s[8] = s[13] = s[18] = s[23] = "-";

	var uuid = s.join("");
	return uuid;
}


let baseTemplate =String.format( "<template>\n</template>"+
"\n\n\n\n\n<script>\n<{0}script>"+
"\n\n\n\n\n<stype>\n<{1}style>",'/','/')

export default {
 
    data:function(){
        return{
                webCode:baseTemplate, //web代码
cmOptions:{
   
    tabSize: 2,
    styleActiveLine: false,
    lineNumbers: true,     // 是否在编辑器左侧显示行号
    line: true,
    theme: 'eclipse',      // 主题
    foldgutter: true,
    autocorrect: true,
    lineWrapping: true,   // 是否代码折叠
    matchBrackets: true,  // 括号匹配
    extraKeys: { "Tab": "autocomplete" },
    autoCloseBrackets: true
 },
 // 弹框中方案临时信息
      tempCaseInfo:  {},
      caseArray:[],//方案数组

       
      dialogTableVisible:false,
      operateFlag: '',
      formLabelWidth:'120px' ,//diaglog宽度
      value:'',//选择框的值
      caseId:this.$route.query.id

        }
    },
    components:{
        codemirror
    },
    mounted(){
        this.getCaseArray();
        this.select(this.caseId);
        this.value = this.caseId;
    },
    methods:{
        getCaseArray(){
              let temp = localStorage.getItem("caseArray");
             this.caseArray = temp ? JSON.parse(temp) : [];
        },
        showDialog(flag){
           
           switch(flag){
              
               case 'new':
                   this.tempCaseInfo= new CaseInfo();
                   
                   break;
                case 'save':      
                   break;
                       
           }
            this.dialogTableVisible = true;
            
           this.operateFlag = flag;
         
        },
        //保存方案
        save(){
                   
                    //修改
                    if(this.tempCaseInfo.caseId != undefined  ){
                       for(let i = 0 ;i<this.caseArray.length;i++){
                           if(this.caseArray[i].caseId == this.tempCaseInfo.caseId){
                               this.caseArray[i] = this.tempCaseInfo;
                               break;
                           }
                       }

                    }
                    //新增
                    else{
                         let id = uuid();
                        this.tempCaseInfo.caseId = id;
                         this.caseArray.push(this.tempCaseInfo);

                    }
                    this.tempCaseInfo.code = this.webCode;
  
                    //添加到Localstorage
                   localStorage.setItem('caseArray',JSON.stringify(this.caseArray));
                    this.dialogTableVisible = false;

                    //添加到 状态管理
                    this.$store.commit('update',this.tempCaseInfo);
                    
        },
        //获取select框架的值 
        select(key){
            for(let i = 0;i<this.caseArray.length;i++){
                if(this.caseArray[i].caseId == key){
                    this.tempCaseInfo = this.caseArray[i];
                    this.webCode = this.tempCaseInfo.code;
                    //添加到状态管理
                    this.$store.commit("update",this.tempCaseInfo);
                	break;
                }
                }
        },
        //预览
        preview(){
            let code = this.$store.state.caseInfo.code;
            StringUtil.checkNull(code,"code空");
         let pre =  this.$router.resolve({name:'output',query:{code:code}});
        window.open(pre.href,'_blank')
        }

    }
}
</script>

<style >
.CodeMirror {
border: 1px solid black;
height: 1000px;
}

.CodeMirror-scroll {
height: 1000px;
overflow-y: hidden;
overflow-x: auto;
}
.top{
    border: 1px solid black
}
</style>